import React from 'react'
import { useState, useEffect } from 'react'
import { Button } from 'antd'
import './style.css';


// memo包裹的组件, 只在初次渲染时执行一次
const Child = ({reload}) => {
  console.log("子组件重新渲染了");
  
  return (
    <div className='child-box'>
      <div>我是Child组件</div>
    </div>
  )
}

const arePropsEqual = (preProps, nextProps) => {
  // console.log(preProps, nextProps); 
  // return true;   当返回true时 不渲染, 返回false 渲染 
   console.log(nextProps.reload);
   
  return !nextProps.reload;
}


const MemoizedChild = React.memo(Child, arePropsEqual);

export default function () {
  const [count, setCount] = useState(0);
  const [reload, setReload] = useState(false);

  useEffect(() => {
    if (count !== 0 && count % 4 === 0) {
      setReload(true);
    }
  }, [count])
  
  return (
    <div className='wrap'>

      <MemoizedChild reload={reload} />

      <h3>求和为: {count}</h3>
      <Button onClick={() => setCount(pre => pre + 1)}>点我count+1</Button>
    </div>
  )
}
